<template>
  <div class="app-container">
    <div class="mb10">
      <el-button type="success" icon="el-icon-plus" @click="handleAdd"> 添加 </el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row size="mini">
      <el-table-column label="#" type="index" width="50" />
      <el-table-column label="英文名" prop="enName" />
      <el-table-column label="中文名" prop="cnName" />
      <el-table-column label="性别" prop="gender" />
      <el-table-column label="出生日期" prop="birthday" />
      <el-table-column label="国籍" prop="nation" />
      <el-table-column label="证件种类" prop="certType" />
      <el-table-column label="证件号码" prop="certNo" />
      <el-table-column label="颁发日期" prop="effectTime" />
      <el-table-column label="失效日期" prop="expireTime" />
      <el-table-column label="备注" prop="comment" />
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(row)" />
          <!-- <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(row)"
          /> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="m-center">
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchList" />
    </div>

    <!-- 编辑 -->
    <el-drawer :title="isEdit ? '编辑' : '新增'" :visible.sync="drawer" size="700px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" size="small">
        <el-form-item label="英文名" prop="enName" required>
          <el-input v-model.trim="temp.enName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="中文名" prop="cnName" required>
          <el-input v-model.trim="temp.cnName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否主宾" prop="isHead">
          <el-switch v-model="temp.isHead" active-color="#13ce66" inactive-color="#ff4949" active-value="Y" inactive-value="N" />
        </el-form-item>
        <el-form-item label="性别" prop="gender" required>
          <el-select v-model="temp.gender">
            <el-option v-for="item in genderOptions" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker value-format="yyyy-MM-dd" v-model="temp.birthday" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>

        <el-form-item label="国籍" prop="nation" required>
          <el-select filterable v-model="temp.nation" placeholder="请选择国籍">
            <el-option v-for="item in countryList" :key="item.enName" :label="item.cnName || item.cnShortName" :value="item.enName" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="证件种类" prop="certType" required>
          <el-input v-model.trim="temp.certType" autocomplete="off" />
        </el-form-item> -->
        <el-form-item label="证件号码" prop="certType" required>
          <el-input placeholder="请输入证件号码" v-model="temp.certNo">
            <el-select v-model="temp.certType" slot="prepend" placeholder="证件种类" style="width: 120px">
              <el-option v-for="currancy in idTypeList" :key="currancy.id" :label="currancy.cnName" :value="currancy.enName"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="有效日期" prop="expireTime">
          <el-date-picker v-model="validTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input type="textarea" v-model.trim="temp.comment" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="附件" prop="mobile">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="isEdit ? update() : add()" size="large">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { createCustomerPassenger, queryCustomerPassenger, modifyCustomerPassenger, viewCustomerPassenger } from '@/api/client'
import { querySystemCode, queryCountry } from '@/api/code'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const defaultForm = {
  birthday: '',
  certNo: '',
  certType: '',
  cnName: '',
  comment: '',
  effectTime: '',
  enName: '',
  expireTime: '',
  gender: '',
  isHead: 'N',
  nation: '',
  customerId: ''
}

export default {
  name: 'ClientDetail',
  components: { Pagination },
  filters: {},
  prop: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      listQuery: {
        id: '',
        limit: 10,
        page: 1
      },
      genderOptions: [
        { key: 'Male', value: 'Male' },
        { key: 'Female', value: 'Female' }
      ],
      temp: Object.assign({}, defaultForm),
      drawer: false,
      validTime: [],
      rules: {},
      idTypeList: [],
      isEdit: false,
      countryList: []
    }
  },

  created() {
    const id = this.$route.params && this.$route.params.id
    if (id) {
      this.listQuery.id = parseInt(id)
      this.temp.customerId = parseInt(id)
      this.fetchList()
      this.querySystemCode()
      this.queryCountry()
    }
  },
  methods: {
    // 得到列表
    async fetchList() {
      this.listLoading = true
      queryCustomerPassenger(this.listQuery).then((response) => {
        this.tableData = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    querySystemCode() {
      querySystemCode({ baseIds: [1073] }).then((response) => {
        this.idTypeList = response.data
      })
    },
    queryCountry() {
      queryCountry({}).then((response) => {
        this.countryList = response.data
      })
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchList()
    },
    // 重置数据
    resetTemp() {
      this.temp = Object.assign({}, defaultForm)
      this.validTime = []
      this.temp.customerId = this.listQuery.id
      console.log(this.temp)
    },
    handleAdd() {
      this.resetTemp()
      this.drawer = true
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    add() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.validTime.length == 2) {
            this.temp.effectTime = this.validTime[0]
            this.temp.expireTime = this.validTime[1]
          }
          createCustomerPassenger(this.temp).then((response) => {
            this.$message.success('添加成功')
            this.drawer = false
            this.fetchList()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign(this.temp, row)
      this.validTime = [this.temp.effectTime, this.temp.expireTime]
      this.isEdit = true
      this.drawer = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改
    update() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.validTime.length == 2) {
            this.temp.effectTime = this.validTime[0]
            this.temp.expireTime = this.validTime[1]
          }
          modifyCustomerPassenger(this.temp).then((response) => {
            this.$message.success('修改成功')
            this.drawer = false
            this.fetchList()
          })
        }
      })
    },
    handleDelete() {}
  }
}
</script>
